{% extends "base.html" %}

{% block subtitle %}
  Learners' Gallery
{% endblock subtitle %}

{% block content %}
  <div class="container" ng-controller="LearnGallery">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="oppia-main-content">

          <h3 class="oppia-page-title">
            Learners' Gallery
          </h3>

          <div ng-if="displayedCategories">
            <div class="row">
              <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="nav nav-tabs oppia-gallery-nav-tabs oppia-light-border-right">
                  <div class="oppia-gallery-menu">
                    <ul class="nav nav-pills nav-stacked" id="navTabs">
                      <li ng-repeat="(category, explorations) in displayedCategories"
                          ng-class="{active: $index == 0}">
                        <a data-toggle="tab" href="#<[category|spacesToUnderscores]>">
                          <[category]>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="col-lg-9 col-md-9 col-sm-9">
                <div class="tab-content oppia-gallery-tiles-container">
                  <div ng-repeat="(category, explorations) in displayedCategories" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
                    <div class="row">

                      <a ng-repeat="exploration in explorations" class="oppia-gallery-tile" href="/explore/<[exploration.id]>">

                        <div class="oppia-gallery-tile-top">
                            <div class="oppia-gallery-tile-description">
                              <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                              <span class="oppia-gallery-tile-play">
                                <span class="glyphicon glyphicon-play-circle"></span>
                              </span>
                            </div>
                        </div>
                      </a>

                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <br>

          <h4>
            You can also try out beta explorations on the <a href="/playtest">Playtest</a> page!
          </h4>
          <h4>
            {% if user_email %}
              To create new explorations or edit existing ones, visit the <a href="/contribute">Contributors' Gallery</a>.
            {% else %}
              To create new explorations or edit existing ones, you must <a href="{{contribute_gallery_login_url}}">log in</a>.
            {% endif %}
          </h4>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('galleries/LearnGallery.js') }}
  </script>
{% endblock footer_js %}
